<template>
  <div>
    <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
      <div slot="slot1">
        <el-form class="form" ref="form1" :model="formData" label-width="140px" :rules="emergencyFormRules">
          <el-form-item label="信息来源：" prop="dutySource">
            <span class="hover">{{ formData.dutySource }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div slot="slot2">
        <el-form class="form" ref="form2" :model="formData" label-width="140px" :rules="emergencyFormRules"
          label-position="top">
          <el-form-item label="日报名称：" prop="dutySource" style="display: flex">
            <span>{{ formData.reportName }}</span>
          </el-form-item>
          <el-form-item label="总体情况：" prop="eventMonitor">
            <el-input type="textarea" v-model="formData.eventMonitor" v-if="isEdit"></el-input>
            <span v-else>{{ formData.eventMonitor }}</span>
          </el-form-item>
          <el-form-item label="应急处置情况：" prop="powerWork">
            <el-input type="textarea" v-model="formData.powerWork" v-if="isEdit"></el-input>
            <span v-else>{{ formData.powerWork }}</span>
          </el-form-item>
          <el-form-item>
            <AccessoryTable :tableData="formData" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="slot3">
        <el-descriptions :labelStyle="{
          display: 'inline-block',
          textAlign: 'right',
          width: '100px',
          fontSize: '18px',
        }" :contentStyle="{ fontSize: '18px' }">
          <el-descriptions-item label="填报人">{{ formData.creator }}</el-descriptions-item>
          <el-descriptions-item label="单位及部门">{{ formData.createDeptName }}</el-descriptions-item>
          <el-descriptions-item label="填报时间">{{ formData.reportTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="slot5">
        <el-form ref="form5" :model="formData" :rules="emergencyFormRules" label-width="110px" class="form"
          :show-message="false">
          <el-form-item label="审批意见:">
            <el-input v-model="formData.approvalOpinion" v-if="isApprover"></el-input>
            <span v-else style="font-size: 18px;color: #606266;">{{ formData.approvalOpinion }}</span>
          </el-form-item>
        </el-form>
        <el-descriptions :labelStyle="{
          display: 'inline-block',
          textAlign: 'right',
          width: '100px',
          fontSize: '18px',
        }" :contentStyle="{ fontSize: '18px' }">
          <el-descriptions-item label="审批人">{{ formData.approvalUser }}</el-descriptions-item>
          <el-descriptions-item label="单位及部门">{{ formData.approvalDept }}</el-descriptions-item>
          <el-descriptions-item label="审批时间">{{ formData.approvalTime }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </LsdDialogTitle>
  </div>
</template>
<script>
import AccessoryTable from "./accessoryTable";
import { emergencyFormRules } from "./config.js";
export default {
  components: {
    AccessoryTable
  },
  props: {
    titleConfig: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isEdit: true,
      // 折叠面板信息
      activeNames: ["1", "2", "3", "5"],
      formData: {
        // 信息来源
        dutySource: "",
        // 日报名称
        reportName: "",
        // 总体情况
        eventMonitor: "",
        // 处置情况
        powerWork: "",
        // 填报人信息
        creator: "",
        createDeptName: "",
        dutyPersonId: "",
        reportTime: "",
        dutyEmergencyStopStatisticsList: [],
        dutyEmergencyUnitIntoList: [],
        dutyEmergencyWeatherReportList: [],
        approvalOpinion: "", // 审批意见
        // 审批人信息
        approvalUser: "",
        approvalUserId: "",
        approvalDept: "",
        approvalTime: ""
      },
      emergencyFormRules,
      isApprover: false
    };
  },
  methods: {
    resetData() {
      this.formData = this.$options.data().formData;
    },
    submitValidate() {
      return new Promise(resolve => {
        this.$refs.form2.validate(
          (valid) => {
            if (valid) {
              resolve(this.formData);
            } else {
              resolve(false);
            }
          });
      });
    },
    ApproverValidate() {
      return new Promise(resolve => {
        this.$refs.form5.validate(
          (valid) => {
            if (valid) {
              resolve(this.formData.approvalOpinion);
            } else {
              resolve(false);
            }
          });
      });
    }
  }

};
</script>
<style lang="less" scoped>
.form {
  :deep(.el-form-item__label) {
    font-size: 18px;
  }

  :deep(.el-form-item__content) {
    font-size: 18px;

    .el-textarea {
      font-size: 18px;
    }
  }
}
</style>
